import React from 'react';
import { Card, Modal, Message } from 'antd';
import { withRouter } from 'umi';
import { useRequest } from '@/hooks';
import { getFirstSimpleInfo, postStatement } from '@/pages/EntryManage/services';
import personalDataPic from '@/assets/entry/personalDataPic_2.png';
import Icon from '@/components/IconPro';
import styles from '../EntryGuide/index.less';
import EmployeeArchives from '../components/EmployeeArchives';
// import FileCompleteProgress from '../components/FileCompleteProgress';
import TopBanner from '../components/TopBanner';

const html = `修改个人档案即代表您已认真阅读并同意接受以下声明：<br/>
    1、个人档案中所提供的信息是全面且准确的；<br/>
    2、公司可对个人档案中有关的信息进行调查，公司亦有权查阅本人各种材料以及向第三方做个人访谈（如应聘者原雇主、家庭成员、业务联系人、经济来源人、朋友等）。<br/>
    3、由于本人提供虚假信息的，公司方面有权在核实后随时终止劳动合同。<br/>`;
// 入职指引-查看档案
const EntryGuideFile = ({ location }) => {
    const [visible, setVisible] = React.useState(false);
    const { query } = location;
    const { entryPersonnelCode } = query || {};

    // 获取入职人员信息
    const { data: entryPersonnelData = {} } = useRequest(() => getFirstSimpleInfo({ entryPersonnelCode }), {
        onSuccess: res => {
            if (res) {
                const { code, data, msg } = res;
                if (code === 10000) {
                    const { archiveUpdateTime } = data;
                    if (archiveUpdateTime.length > 0) {
                        setVisible(false);
                    } else {
                        setVisible(true);
                    }
                    return data;
                }
                Message.error(msg);
            }

            return undefined;
        }
    });
    // 提交声明
    const { run: submitStatement } = useRequest(() => postStatement({ entryPersonnelCode, archiveTip: html }), {
        manual: true,
        onSuccess: res => {
            const { code, msg } = res;
            if (code === 10000) {
                setVisible(false);
            } else {
                Message.error(msg);
            }
        }
    });
    // 我知道了
    const handleOk = () => {
        submitStatement();
    };
    // 取消
    const handleCancel = () => {
        setVisible(false);
    };
    return (
        <div
            className={styles.entryGuideWrap}
            data-anchor-container=""
            style={{ height: 'calc(100vh - 56px)', overflow: 'auto' }}
        >
            <div className={styles.topBarWrap}>
                <TopBanner
                    partLeft={{
                        render: (
                            <>
                                <p>新员工你好！</p>
                                <p>
                                    <b>请查看个人档案</b>
                                </p>
                            </>
                        )
                    }}
                    partRight={{
                        render: <img src={personalDataPic} alt="" />
                    }}
                />
            </div>
            <div className={`${styles.guideFileWrap} ${styles.guideContWrap}`}>
                <Card bodyStyle={{ padding: '24px 0 0', margin: '0 auto' }} bordered={false}>
                    {/* <FileCompleteProgress entryPersonnelCode={entryPersonnelCode} width={340} />
                    <Divider /> */}
                    <EmployeeArchives
                        readonly={entryPersonnelData?.step === 2}
                        employeeCode={query?.entryPersonnelCode}
                        isEntryGuide
                    />
                </Card>
            </div>

            <Modal
                closable={false}
                visible={visible}
                onOk={handleOk}
                okText="我知道了"
                centered
                onCancel={handleCancel}
                cancelButtonProps={{ style: { display: 'none' } }}
                maskClosable={false}
                width={560}
            >
                <Card bordered={false}>
                    <div
                        style={{
                            color: ' rgba(0,0,0,0.65)',
                            paddingLeft: 38,
                            position: 'relative',
                            lineHeight: '27px'
                        }}
                    >
                        <Icon
                            type="iconnitificationIcon"
                            style={{ position: 'absolute', left: 0, fontSize: 20, color: '#FFA22D' }}
                        />
                        <div style={{ fontSize: 16, color: 'rgba(0,0,0,0.85)', fontWeight: 600 }}>
                            修改个人档案即代表您已认真阅读并同意接受以下声明：
                        </div>
                        <br />
                        1、个人档案中所提供的信息是全面且准确的；
                        <br />
                        2、公司可对个人档案中有关的信息进行调查，公司亦有权查阅本人各种材料以及向第三方做个人访谈（如应聘者原雇主、家庭成员、业务联系人、经济来源人、朋友等）。
                        <br />
                        3、由于本人提供虚假信息的，公司方面有权在核实后随时终止劳动合同。
                    </div>
                </Card>
            </Modal>
        </div>
    );
};

export default withRouter(EntryGuideFile);
